<template>
  <div class="rank">
    <cube-scroll class="kaho-scroll" ref="scroll">
      <ul class="kaho-list">
        <li class="kaho-item flex" v-for="(item, index) in topList" :key="index">
          <div class="kaho-img-box">
            <img :src="item.picUrl" alt="" class="kaho-img">
          </div>
          <ul class="kaho-song-list flex-vertical flex-align-center flex-1">
            <li class="kaho-song" v-for="(it, i) in item.songList" :key="i">{{i+1}}.{{it.songname}}-{{it.singername}}</li>
          </ul>
        </li>
      </ul>
    </cube-scroll>
  </div>
</template>
<script>
import {getTopList} from '@/api/rank'
import {ERR_OK} from '@/api/config'
import axios from 'axios'

export default {
  name: 'rank',

  data(){
    return {
      topList: []
    }
  },

  methods: {
    _getTopList() {
      getTopList().then((res) => {
        if (res.code === ERR_OK) {
          console.log(res)
          this.topList = res.data.topList
        }
      })
    },

  },

  created(){
    this._getTopList();
  }
}
</script>
<style scoped lang="stylus">
.rank{
  position: fixed;
  width: 100%;
  top: 88px;
  bottom: 0;

  .kaho-scroll{
    height: 100%;
    overflow: hidden;

    .kaho-list{
      .kaho-item{
        margin: 0 20px;
        padding-top: 20px;
        height: 100px;

        .kaho-img-box{
          .kaho-img{
            width: 100px;
            height: 100px;
            display: block;
          }
        }

        .kaho-song-list{
          padding: 0 20px;
          height: 100px;
          overflow: hidden;
          background: #333;
          color: hsla(0,0%,100%,.3);
          font-size: 12px;

          .kaho-song{
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            line-height: 26px;
          }

        }
      }

      .kaho-item:last-child {
        padding-bottom: 20px;
      }
    }
  }
}
</style>

